<template>
	<view class="main-cont">
		<view class="content">
			<view class="tips">
				<view class="">请选择角色</view>
			</view>
			<view class="list">
				<view class="list-item" @click="selectrole(0)">
					<view class="posa">{{gl}}</view>
					<u-image width="632rpx" height="248rpx"
						src="https://yhykt.oss-cn-beijing.aliyuncs.com/29C2E9698AEC452B896D7A4469F321C8%E6%9C%8D%E5%8A%A1%E5%9B%A2%E9%98%9F%E7%AE%A1%E7%90%86%E5%91%98.png?Expires=4789677417&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=gG%2BmzIrk3b18yWrcaPoBMKJNqj8%3D">
					</u-image>
					<view class="posa1" v-if="current == 0">
						<view class="circle"></view>
					</view>
					<view class="posa1" v-if="current != 0">
						<view class="circle1"></view>
					</view>
				</view>
				<view class="list-item" @click="selectrole(1)">
					<view class="posa">{{ls}}</view>
					<u-image width="632rpx" height="248rpx"
						src="https://yhykt.oss-cn-beijing.aliyuncs.com/08921408F7854BBB90F8A0A1DAB325AE%E8%80%81%E5%B8%88.png?Expires=4789677442&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=aJpW%2BCdrwCV0bkRJ5lV2MGrQFok%3D">
					</u-image>
					<view class="posa1" v-if="current == 1">
						<view class="circle"></view>
					</view>
					<view class="posa1" v-if="current != 1">
						<view class="circle1"></view>
					</view>
				</view>
				<view class="list-item" @click="selectrole(2)">
					<view class="posa">{{st}}</view>
					<u-image width="632rpx" height="248rpx"
						src="https://yhykt.oss-cn-beijing.aliyuncs.com/EEB161EF39914C1B8B1EE29081ECC4B4%E5%AD%A6%E7%94%9F.png?Expires=4789943235&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=C3EQBD4isi3S8Ab3pTELZ6cLf1k%3D">
					</u-image>
					<view class="posa1" v-if="current == 2">
						<view class="circle"></view>
					</view>
					<view class="posa1" v-if="current != 2">
						<view class="circle1"></view>
					</view>
				</view>
			</view>
			<button class="btn" @click="doselect()" :disabled="disabledbtn">确 定</button>
			<view class="back" @click="back">
				返回
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabledbtn: true,
				current: 9,
				gl: "管理员",
				ls: '老师',
				st: '学生'
			};
		},
		methods: {
			selectrole(role) {
				wx.vibrateShort();
				this.current = role;
				this.disabledbtn = false;
			},
			doselect() {
				wx.vibrateShort();
				uni.navigateTo({
					url: `/team/register/tr?current=${this.current}`
				});
			},
			back() {
				uni.navigateBack()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main-cont {
		width: 100%;
		height: 100%;
	}

	.back {
		margin-top: 28rpx;
		width: 100%;
		font-size: 28rpx;
		color: #000;
		text-align: center;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/30AE679C0DB443CC8A3E67477858DEC2%E8%83%8C%E6%99%AF.png?Expires=4789677474&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=3vSNkiSXqT%2FsBzYPIe3MaW%2BAg0E%3D) no-repeat;
		background-size: 100%;
		color: #fff;
		background-color: #f7f6fe;

		.tips {
			width: 80%;
			font-size: 42rpx;
			color: #000;
		}

		.list-item {
			position: relative;
			margin-top: 40rpx;
			width: 632rpx;
			height: 248rpx;
			background: #6E75F1;
			border-radius: 20rpx;
			font-size: 36rpx;
			text-align: center;
			overflow: hidden;

			.posa {
				position: absolute;
				top: 33rpx;
				left: 48rpx;
				z-index: 100000;
			}

			.posa1 {
				position: absolute;
				top: 33rpx;
				right: 48rpx;
				z-index: 100000;
			}
		}
	}

	.mt10 {
		font-size: 14px;
		color: #999999;
	}

	.btn {
		margin-top: 80rpx;
		width: 560rpx;
		height: 86rpx;
		line-height: 86rpx;
		background: linear-gradient(0deg, #626bf1, #7686f6);
		box-shadow: 0px 14rpx 40rpx 0px #626bf1;
		border-radius: 43rpx;
		color: #ffffff;
		font-size: 34rpx;
	}

	.circle {
		width: 41rpx;
		height: 41rpx;
		background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/8373937871D642CF93C909C9D9218F79%E7%A1%AE%E8%AE%A4.png?Expires=4789677454&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=ysEdKFMXiXvAtwCvqkY7rcFWOfk%3D) no-repeat;
		background-size: 100% 100%;
	}

	.circle1 {
		width: 41rpx;
		height: 41rpx;
		background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/901CC0724083486FACF02942148160D832d30abd1e6fc6d465fb873971bb05b.png?Expires=4789682622&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=TwZ0DozSpyYF4YAQCEsVBkdRs04%3D) no-repeat;
		background-size: 100% 100%;
	}
</style>
